<template>
    <div>
        <h1 v-color="color1">指令的值1测试</h1>
        <h1 v-color="color2">指令的值2测试</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            color1: "red",
            color2: "blue"
        }
    },
    directives: {
        color: {
            // inserted 元素被加入页面时触发的逻辑
            inserted(el, binding) {
                // console.log(el)
                // binging.value 可以获取指令的参数值
                console.log(binding)
                el.style.color = binding.value
            },
            // update 指令的值修改的时候触发;提供值变化后，DOM更新的逻辑
            update(el, binding) {
                el.style.color = binding.value
            }
        }
    }
}
</script>

<style>

</style>